{% stylesheet %}
.block_image4 .block_image4_content {
  display: grid;
  grid-gap: 30px;
  margin: 0 auto;
}

.block_image4 .image-item {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.block_image4 .image-item:hover .four-image-item-mask {
  	opacity: 1;
}
.block_image4 .four-image-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity .8s;
}
.block_image4 .four-image-item-mask .four-image-item-btn {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  font-family: Montserrat;
  font-weight: 400;
  padding: 12px 40px;
  border: 1px solid #fff;
  word-break: break-word;
}

.block_image4 .image-item .default_image_number {
  font-size: 18px;
  color: #999;
  position: absolute;
  right: 20px;
  bottom: 14px;
}

.block_image4 .image-item img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}

.block_image4 .horizontal_left {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
}

.block_image4 .horizontal_left .image-item:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3;
}

.block_image4 .horizontal_left .image-item:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
}

.block_image4 .horizontal_left .image-item:nth-child(3) {
  grid-column: 3/4;
  grid-row: 1/2;
}

.block_image4 .horizontal_left .image-item:nth-child(4) {
  grid-column: 2/4;
  grid-row: 2/3;
}

.block_image4 .horizontal {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.block_image4 .horizontal .image-item:nth-child(1) {
  grid-column: 1/2;
}

.block_image4 .horizontal .image-item:nth-child(2) {
  grid-column: 2/3;
}

.block_image4 .horizontal .image-item:nth-child(3) {
  grid-column: 3/4;
}

.block_image4 .horizontal .image-item:nth-child(4) {
  grid-column: 4/5;
}

.block_image4 .horizontal_right {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
}

.block_image4 .horizontal_right .image-item:nth-child(1) {
  grid-column: 3/4;
  grid-row: 1/3;
}

.block_image4 .horizontal_right .image-item:nth-child(2) {
  grid-column: 1/2;
  grid-row: 1/2;
}

.block_image4 .horizontal_right .image-item:nth-child(3) {
  grid-column: 2/3;
  grid-row: 1/2;
}

.block_image4 .horizontal_right .image-item:nth-child(4) {
  grid-column: 1/3;
  grid-row: 2/3;
}

@media screen and (min-width: 1200px) {
  .block_image4 .horizontal .image-item {
    min-height: calc(calc(var(--imageWidth) - 90px) / 4) !important;
  }
  .block_image4 .horizontal_left .image-item:nth-child(1), .block_image4 .horizontal_right .image-item:nth-child(1) {
    height: calc(calc(var(--imageWidth) - 160px) / 3 * 2 + 30px) !important;
  }
  .block_image4 .horizontal_left .image-item, .block_image4 .horizontal_right .image-item {
    height: calc(calc(var(--imageWidth) - 160px) / 3) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .block_image4 .horizontal .image-item {
    height: auto;
  }
  .block_image4 .horizontal_left .image-item, .block_image4 .horizontal_right .image-item {
    height: calc(calc(100vw - 160px) / 3) !important;
  }
  .block_image4 .horizontal_left .image-item:nth-child(1), .block_image4 .horizontal_right .image-item:nth-child(1) {
    height: calc(calc(100vw - 160px) / 3 * 2 + 30px) !important;
  }
}

@media screen and (max-width: 767px) {
  .block_image4 .horizontal_left {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-gap: 15px !important;
  }
  .block_image4 .image-item .default_image_number {
    right: 8px;
    bottom: 5px;
    font-size: 14px;
  }
  
  .block_image4 .horizontal_left .image-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  .block_image4 .horizontal_left .image-item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .block_image4 .horizontal_left .image-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .block_image4 .horizontal_left .image-item:nth-child(4) {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  .block_image4 .horizontal {
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px !important;
  }
  .block_image4 .horizontal .image-item:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .block_image4 .horizontal .image-item:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .block_image4 .horizontal .image-item {
    height: auto;
  }
  .block_image4 .horizontal_left .image-item, .block_image4 .horizontal_right .image-item {
    height: calc(calc(100vw - 40px)  / 2) !important;
  }
  .block_image4 .horizontal_left .image-item:nth-child(1), .block_image4 .horizontal_right .image-item:nth-child(1) {
    height: calc(calc(100vw - 25px)) !important;
  }
  .block_image4 .horizontal_right {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-gap: 15px !important;
  }
  .block_image4 .horizontal_right .image-item:nth-child(1) {
    grid-column: 2/3;
    grid-row: 1/3;
  }
  .block_image4 .horizontal_right .image-item:nth-child(2) {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .block_image4 .horizontal_right .image-item:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .block_image4 .horizontal_right .image-item:nth-child(4) {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

{% endstylesheet %}
{% if section.settings.layout == "horizontal" %}
{% assign maxHeight = "380px" %}
{% else %}
{% assign maxHeight = "790px" %}
{% endif %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_url %}

 <div  class="block_image4 container_wrapper">
	{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

  <div class="">
    <div class="block_image4_content {{ section.settings.layout }}" style="--imageWidth: {% if section.settings.is_width_fill %}var(100vw - 100px){% else %}{{theme_config.global.general_layout_width}}px{% endif %}">

	
      <a class="image-item" href="{{section.settings.image_one_link | setUrlDataFrom:data_from}}" data-tips="Please select the image link">
        {% if section.settings.image_one.src %}
       <img  data-src="{{ section.settings.image_one.src }}" src="{{ defaultImageLoading }}" alt="{{ section.settings.image_one.alt }}">
        {% else %}
        {% include default_block , {width:'100%',height : "100%" } %}
        <span class="default_image_number">Image-1</span>
        {% endif %}

		{% if section.settings.one_btn_text != '' %}
			<div class="four-image-item-mask">
				<div class="four-image-item-btn">{{section.settings.one_btn_text}}</div> 
			</div>
		{% endif %}
      </a>
      <a class="image-item" href="{{section.settings.image_two_link | setUrlDataFrom:data_from}}" data-tips="Please select the image link">
         {% if section.settings.image_two.src %}
       <img  data-src="{{ section.settings.image_two.src }}" src="{{ defaultImageLoading }}" alt="{{ section.settings.image_two.alt }}">
        {% else %}
        {% include default_block , {width:'100%',height : '100%' } %}
        <span class="default_image_number">Image-2</span>
        {% endif %}

		{% if section.settings.two_btn_text != '' %}
			<div class="four-image-item-mask">
				<div class="four-image-item-btn">{{section.settings.two_btn_text}}</div> 
			</div>
		{% endif %}
      </a>
      <a class="image-item" href="{{section.settings.image_three_link | setUrlDataFrom:data_from}}" data-tips="Please select the image link">
         {% if section.settings.image_three.src %}
       <img  data-src="{{ section.settings.image_three.src }}" src="{{ defaultImageLoading }}" alt="{{ section.settings.image_three.alt }}">
        {% else %}
        {% include default_block , {width:'100%',height : '100%' } %}
        <span class="default_image_number">Image-3</span>
        {% endif %}

		{% if section.settings.three_btn_text != '' %}
			<div class="four-image-item-mask">
				<div class="four-image-item-btn">{{section.settings.three_btn_text}}</div> 
			</div>
		{% endif %}
      </a>

      <a class="image-item" href="{{section.settings.image_four_link | setUrlDataFrom:data_from}}" data-tips="Please select the image link">
         {% if section.settings.image_four.src %}
       <img data-src="{{ section.settings.image_four.src }}" src="{{ defaultImageLoading }}" alt="{{ section.settings.image_four.alt }}">
        {% else %}
        {% include default_block , {width:'100%',height : '100%' } %}
        <span class="default_image_number">Image-4</span>
        {% endif %}

		{% if section.settings.four_btn_text != '' %}
			<div class="four-image-item-mask">
				<div class="four-image-item-btn">{{section.settings.four_btn_text}}</div> 
			</div>
		{% endif %}
      </a>
    </div>
  </div>
 </div>

{% schema %}
{
	"tag": "",
	"class": "block_image4",
	"is_global": false,
	"name": {
		"zh_CN": "多图4",
		"en_US": "Images 4"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail"
		},
		{
			"type": "card_radio",
			"label": {
				"zh_CN": "版式选择",
				"en_US": "Format selection"
			},
			"id": "layout",
			"option": [
				{
					"label": {
						"zh_CN": "单图居左",
						"en_US": "Single image on the left"
					},
					"value": "horizontal_left",
					"icon": "shopyyicon-Four_left"
				},
				{
					"label": {
						"zh_CN": "单图居右",
						"en_US": "Single image on the right"
					},
					"value": "horizontal_right",
					"icon": "shopyyicon-Four_right"
				}
			],
			"default": "horizontal"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片1",
				"en_US": "Image 1"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高800*1664px，固定当前尺寸比例",
				"en_US": "Recommended width/height 800*1664px, fixed current scale"
			},
			"id": "image_one"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_one_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"id": "one_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片2",
				"en_US": "Image 2"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高比例为1:1，宽度800px以上",
				"en_US": "Recommended width to height ratio 1:1, width above 800px"
			},
			"id": "image_two"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_two_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"id": "two_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片3",
				"en_US": "Image 3"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高比例为1:1，宽度800px以上",
				"en_US": "Recommended width to height ratio 1:1, width above 800px"
			},
			"id": "image_three"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_three_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"id": "three_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片4",
				"en_US": "Image 4"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高1664*800px，固定当前尺寸比例",
				"en_US": "Recommended width/height 1664*800px, fixed current scale"
			},
			"id": "image_four"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_four_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"id": "four_btn_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Figure 4",
			"layout": "horizontal_left",
			"image_one": {
				"src": "",
				"alt": ""
			},
			"image_one_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"one_btn_text": "",
			"image_two": {
				"src": "",
				"alt": ""
			},
			"image_two_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"two_btn_text": "",
			"image_three": {
				"src": "",
				"alt": ""
			},
			"image_three_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"three_btn_text": "",
			"image_four": {
				"src": "",
				"alt": ""
			},
			"image_four_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"four_btn_text": "",
			"grid_gap": "30"
		},
		"blocks": []
	},
	"icon": "icon-duotu4"
}
{% endschema %}